<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>本月账单查询</title>
  <!-- 引入 Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <!-- 引入 Font Awesome 图标库 -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <script src="js/jquery-2.1.0.js"></script>
  <script>
    $(document).ready(function() {
      // 页面加载完成后直接发起请求
      $.ajax({
        url: '${pageContext.request.contextPath}/taocanquery',
        method: 'GET',
        success: function(response) {
          console.log(response);
          if (response.taocan) {
            // 显示套餐信息
            $('#usernumberResult').text(response.taocan.usernumber);
            $('#taocan_nameResult').text(response.taocan.taocan_name);
            $('#moneyResult').text(response.taocan.money+"元");
            $('#userhuafeiResult').text(response.taocan.userhuafei+"元");
            $('#totalCostResult').text(response.taocan.totalCost+"元");
          } else {
            // 显示错误信息
            $('#errorMsg').removeClass('d-none').text(response.error);
          }
        },
        error: function() {
          $('#errorMsg').removeClass('d-none').text('请求发生错误，请稍后重试。');
        }
      });
    });
  </script>
</head>
<body>
<div class="container my-5">
  <h1 class="text-center mb-4">套餐查询结果</h1>
  <div class="row justify-content-center">
    <div class="col-md-8">
      <p id="errorMsg" class="text-danger d-none"></p>
      <table class="table table-striped table-bordered">
        <thead class="table-dark">
        <tr>
          <th>用户号码</th>
          <th>套餐名称</th>
          <th>套餐费用</th>
          <th>用户话费</th>
          <th>总费用</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td id="usernumberResult"></td>
          <td id="taocan_nameResult"></td>
          <td id="moneyResult"></td>
          <td id="userhuafeiResult"></td>
          <td id="totalCostResult"></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<!-- 引入 Bootstrap 5 JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>